import React, {FC, HTMLAttributeAnchorTarget, useCallback, useContext} from 'react';
import "./HxArticleNormalItem.less";
import classNames from "classnames";
import defaultCover from "@/assets/default_art_cover.png";
import {Checkbox, Image, Popover, Space, Tag} from "antd";
import HxIcon from "@/components/HxIcon";
import {FormattedMessage, Link, useAccess} from "umi";
import * as API from "@/services";
import {HxConfigContext} from "@/layouts/HxConfigContext";
import {correspVal, getArticleLocationStr} from "@/utils/biz";
import {LoadingOutlined} from "@ant-design/icons";
import JournalArticleQuote from "@/pages/JournalPage/JournalDetail/commons/JournalArticleQuote";
import JournalArticleShare from "@/pages/JournalPage/JournalDetail/commons/JournalArticleShare";
import useJournalArticleHelp from "@/pages/JournalPage/JournalDetail/commons/useJournalArticleHelp";

interface HxArticleNormalItemProps {
  className?: string;
  showCover?: boolean;
  article?: API.FrontArticle;
  onArticleChange?: (article: API.FrontArticle) => void;
  footprintTime?: string;
  target?: HTMLAttributeAnchorTarget | undefined;
  //工具栏上的操作只显示图标
  toolbarOnlyIcon?: boolean;
  selected?: boolean;
  onSelectChange?: (selected: boolean) => void;
}

const HxArticleNormalItem: FC<HxArticleNormalItemProps> = (props) => {
  const {showCover = true, article, onArticleChange, footprintTime, selected = undefined, onSelectChange, className, target, toolbarOnlyIcon = false} = props;
  const access = useAccess();
  const {authedRedirect} = useContext(HxConfigContext);
  const {isZhCN} = useContext(HxConfigContext)
  const {downloadArticlePdf, downloadArticlePdfIcon, downloading, favArticle, favIcon, doiUrl} = useJournalArticleHelp(article);

  const fav = useCallback(() => {
    favArticle((record) => {
      onArticleChange?.(record)
    }, 'anchor_hx_cy_card')
  }, [article]);

  const detailPath = `/journal/${article?.journal?.id || article?.journalId}/article/${article?.id}`;

  return (
    <div className={classNames("hx-article-normal-item-container", className)}>
      {
        selected != undefined && (
          <div className={"hx-article-normal-item-checkbox-wrap"}>
            <Checkbox className={"hx-list-seq"} checked={selected} onChange={e => onSelectChange?.(e.target.checked)}>{article?.["_seq_"]}</Checkbox>
          </div>
        )
      }
      {showCover && (
        <Link target={target} to={detailPath} className="hx-article-normal-item-cover">
          <Image src={article?.articleImageUrl} fallback={defaultCover} preview={false}/>
        </Link>
      )}
      <div className={"hx-article-normal-item-body"}>
        <Link target={target} to={detailPath} className={"hx-article-normal-item-title"}
              dangerouslySetInnerHTML={{__html: correspVal(isZhCN, article?.articleTitleCn, article?.articleTitleEn) || ""}}>
        </Link>
        <div className={"hx-article-normal-item-content"}>
          <div className={"hx-article-normal-item-authors"}>
            {correspVal(isZhCN, article?.articleAuthorCn, article?.articleAuthorEn)}
          </div>
          <div className={"hx-article-normal-item-about"}>
            <div>{correspVal(isZhCN, article?.journal?.journalNameCn || article?.journalNameCn, article?.journal?.journalNameEn || article?.journalNameEn)}</div>
            <div>{getArticleLocationStr(article)}</div>
          </div>
        </div>
        <div className={"hx-article-normal-item-footer"}>
          <div className={"hx-article-normal-item-tags"}>
            <Space size={[6, 6]} wrap={true} style={{justifyContent: "start"}}>
              {
                correspVal(isZhCN, article?.articleKeywordCn, article?.articleKeywordEn)
                  ?.replaceAll(";", "|")
                  ?.split("|")
                  ?.map(keyword => <Tag key={keyword}>{keyword}</Tag>)
              }
            </Space>
          </div>
          <div className={"hx-article-normal-item-tools"}>
            {/*<a><HxIcon type={"hxicon-daochu"}/> 导出</a>*/}
            <a
              className={classNames({"hx-downloading": downloading})}
              onClick={(e) => {
                e.preventDefault();
                downloadArticlePdf();
              }}>
              {downloadArticlePdfIcon}
              {!toolbarOnlyIcon && <FormattedMessage id="text.download"/>}
            </a>
            <a onClick={(e) => {
              e.preventDefault();
              fav()
            }}>
              {favIcon}
              {!toolbarOnlyIcon && <FormattedMessage id="text.favorite"/>}
            </a>
            <Popover trigger={"click"} content={
              <JournalArticleShare article={article}/>
            }>
              <a>
                <HxIcon type={"hxicon-code"}/>
                {!toolbarOnlyIcon && <FormattedMessage id="text.scan-code"/>}
              </a>
            </Popover>
            <Popover trigger={"click"}
              //title={<FormattedMessage id="text.quote"/>}
                     content={(
                       <JournalArticleQuote article={article}/>
                     )}>
              <a>
                <HxIcon type={"hxicon-yinyong"}/>
                {!toolbarOnlyIcon && <FormattedMessage id="text.quote"/>}

              </a>
            </Popover>
          </div>
          {/*<Flex vertical={false} gap={16} align={"flex-end"}>
            <Flex vertical={false} flex={1} className={"hx-article-normal-item-tags"}>


            </Flex>
            <Flex vertical={false} gap={28} align={"flex-end"} className={"hx-article-normal-item-tools"}>

            </Flex>
          </Flex>*/}

        </div>
      </div>
    </div>
  );
};

export default HxArticleNormalItem;
